<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <p>{{a}}</p>
        <p><button>a++</button></p>
        <comp-a :a="a" @update:a="addA"></comp-a>
    </div>
</body>
<script>
    var { createApp, getCurrentInstance } = Vue;
    var { ref, reactive } = Vue;
    var { unref, toRaw, markRaw, isRef, isReactive } = Vue;
    var { onBeforeMount, onMounted } = Vue;


    var compA = {
        props: ["a"],
        emits: ["update:a"],
        setup(props) { // props => 父组件传入子组件的数据,如果被子组件接收可以通过props属性访问
            console.log("props", props);
            console.log("props", props.a);

            // defineProps(["a"])
            // defineEmits(["update:a"])

            // 没有被子组件接收的数据  1. 会透传到组件的根元素 2.组件实例上有attrs属性用于存储

            var app = getCurrentInstance(); // comA
            console.log(app);



        },
        template: `<div>
            <p>这是组件A:{{a}}</p>
            <p><button @click="$emit('update:a',a + 1)">a++</button></p>
        </div>`,
          mounted() {
            console.log("选项式","mounted",this);
        },
    }



    var app = createApp({
        components: {
            compA,
        },
        setup() {

            let a = ref(10);
            let zhang = reactive({ name: "张三", age: 18 });

            let addA = (v) => {
                a.value = v;
            }

            return {
                a,
                zhang,
                addA
            }
        },
        // mounted() {
        //     console.log("选项式","mounted");
        // },
    })

    app.mount("#app");

</script>

</html>